<template>
 <div class="show-map">
     <div class="map" ref="mapRef">
     	    <!-- 地图实例 -->
     	    <baidu-map class="bmView"  :center="location" :zoom="zoom" :scroll-wheel-zoom="false" ak="3LgMlTyAIzk2ok2Sn5ZY6NPPmVQjMFch">
                <!-- 比例尺寸-->
                <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                <!--缩放控件 -->
                <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
                <!-- 地图类型 -->
                <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
                <!-- 添加点 -->
                <bm-marker :position="location" :dragging="false"></bm-marker>
     	    </baidu-map>
     </div>
   </div>  
  
</template>

<script setup>
   import { ref, watch} from 'vue'
   import { BaiduMap, BmScale, BmNavigation, BmMapType,BmMarker} from 'vue-baidu-map-3x'
   
  // 对象暴躁的属性
  const props = defineProps({
      itemData: Object
  })
  
  //对内的属性  
  //显示地图缩放层级 15基本上就可以看附近的一些街道了 （1-21）
  const zoom=ref(15) 
    
  const data=reactive({
    location:{
          lng: undefined,
          lat: undefined,
    }
  });
  
  const { location} = toRefs(data);
  
  
  //初始化判断操作，相当于以前vue2中的 created()
  if(props.itemData && props.itemData.longitude){
    //经度
    location.value.lng = props.itemData.longitude 
    //纬度
    location.value.lat = props.itemData.latitude 
  }
  
  //监听props.itemData 对象变化
 watch(() => props.itemData.longitude,  (newVal, oldVal) => {
      console.log(newVal+"，"+oldVal)
  })
  
</script>

<style>
  
  .map{
    width: 100%;
    height: 100%;
  }
    .BMap_cpyCtrl {
      display: none;
    }
  
    .anchorBL {
      display: none;
    } 
    
    .bmView {
      width: 100%;
      height: calc(100% - 50px);
    }
</style>
